<template>
  <el-drawer
    :append-to-body="true"
    title="抄送人设置"
    :visible.sync="$store.state.copyerDrawer"
    direction="rtl"
    class="set_copyer"
    size="550px"
    :before-close="saveCopyer"
  >
    <div class="demo-drawer__content">
      <div class="copyer_content drawer_content">
        <el-button type="primary" @click="addCopyer">添加成员</el-button>
        <p class="selected_list">
          <span v-for="(item, index) in copyerConfig.nodeUserList" :key="index"
            >{{ item.name }}
          </span>
          <a
            v-if="
              copyerConfig.nodeUserList && copyerConfig.nodeUserList.length != 0
            "
            @click="delList"
            >清除</a
          >
        </p>
        <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
          <el-checkbox :label="1">允许发起人自选抄送人</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCopyer">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <employees-role-dialog
        :visible.sync="copyerVisible"
        :data.sync="checkedList"
        :parent="copyerConfig.nodeUserList"
        @change="sureCopyer"
        ref="child"
      />
    </div>
  </el-drawer>
</template>
<script>
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue'
export default {
  components: {
    employeesRoleDialog
  },
  data () {
    return {
      copyerConfig: {},
      ccSelfSelectFlag: [],
      copyerVisible: false,
      checkedList: []
    }
  },
  computed: {
    copyerConfig1 () {
      return this.$store.state.copyerConfig.value
    }
  },
  watch: {
    copyerConfig1 (val) {
      this.copyerConfig = val
      this.ccSelfSelectFlag =
        this.copyerConfig.ccSelfSelectFlag == 0
          ? []
          : [this.copyerConfig.ccSelfSelectFlag]
    }
  },
  mounted () {
    this.copyerVisible = false
  },
  methods: {
    delList () {
      this.copyerConfig.nodeUserList = []
      this.$refs.child.delList()
    },
    addCopyer () {
      this.copyerVisible = true
      this.checkedList = this.copyerConfig.nodeUserList
      this.$refs.child.handleClick()
    },
    sureCopyer (data) {
      this.copyerConfig.nodeUserList = data
      this.copyerVisible = false
    },
    saveCopyer () {
      this.copyerConfig.ccSelfSelectFlag =
        this.ccSelfSelectFlag.length == 0 ? 0 : 1
      this.copyerConfig.error = !this.$func.copyerStr(this.copyerConfig)
      this.$store.commit('updateCopyerConfig', {
        value: this.copyerConfig,
        flag: true,
        id: this.$store.state.copyerConfig.id
      })
      this.closeDrawer()
    },
    closeDrawer () {
      this.$store.commit('updateCopyer', false)
    }
  }
}
</script>

<style lang="scss">
.set_copyer {
  .demo-drawer__content {
    height: 100%;
    .copyer_content {
      height: 85%;
      padding: 20px 20px 0;
      el-button {
        margin-bottom: 20px;
      }
      .selected_list {
        margin-bottom: 20px;
        line-height: 40px;
        span {
          margin-right: 10px;
          padding: 3px 6px 3px 9px;
          line-height: 12px;
          border-radius: 2px;
          border: 1px solid #dcdcdc;
        }
        a {
          color: #3296fa;
        }
      }
    }
  }
  .demo-drawer__footer {
    padding: 10px 30px;
  }
}
</style>
